<script setup>
    import { reactive, ref } from "vue"
    import { ElMessage } from "element-plus"
    import { loginAPI } from "@/api/user"
    import { useUserStore } from "@/stores/user"
    import { useRouter } from "vue-router"
    import { useRoute } from "vue-router"
    // 表单数据
    const loginFormData = reactive({
        username: "admin",
        password: "admin"
    }) 
    // 表单校验规则
    const rules = {
        username: [
            {required: true, message: "用户名不能为空", trigger: "blur"},
            {min: 3, max: 10, message: "用户名长度在 3 - 10 之间", trigger: "blur"}
        ],
        password: [
            {required: true, message: "密码不能为空", trigger: "blur"},
            {min: 5, max: 20, message: "密码长度在 5 - 20 之间", trigger: "blur"}
        ]
    }
    // 创建pinia仓库实例
    const userStore = useUserStore()
    // 创建路由实例
    const router = useRouter()
    // 创建路由接收对象实例
    const route = useRoute()
    // 整体校验
    const loginFormRef = ref(null)
    // 登录
    const onLogin = () => {
        // 1.整体校验
        loginFormRef.value.validate(async (result) => {
            if(!result) {
                return ElMessage.error("用户名或密码无效！")
            }
            // 2.通过校验，发送登录请求
            // -- 若是登录失败，下述方法将抛出异常，我们在此处进行处理
            try{
                // 需要使用await关键字将其变为同步操作，try catch才能捕捉到异常
                await userStore.login(loginFormData)
                // 3.路由跳转
                // -- 优先回跳至之前访问的路由，若是为空，则跳转至主页
                router.push(route.query.comebackUrl || '/')
                // 4.登录成功提示
                ElMessage.success("登录成功")
            }
            catch(e) {
                // 弹出错误信息
                return ElMessage.error(e.message)
            }
        })
    }
    // 重置
    const onCancel = () => {
        loginFormRef.value.resetFields()
    }


</script>

<template>
    <div class="login-box">
        <el-card>
            <!-- 头部 -->
            <template #header>
                <p>文章管理系统</p>
            </template>
            <!-- 主体 -->
            <template #default>
                <el-form
                :model="loginFormData"
                :rules="rules"
                ref="loginFormRef">
                    <el-form-item prop="username">
                        <el-input 
                        placeholder="请填写用户名"
                        v-model="loginFormData.username"
                        prefix-icon="User"
                        clearable
                        type="text"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input 
                        placeholder="请填写密码"
                        v-model="loginFormData.password"
                        prefix-icon="Lock"
                        clearable
                        type="password"
                        show-password
                        @keydown.enter="onLogin"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button 
                        type="primary"
                        @click="onLogin">登 录</el-button>
                        <el-button
                        @click="onCancel">取 消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
    .login-box {
        display: flex;
        justify-content: center;
        align-items: center;

        height: 100vh;
        width: 100vw;
        background: url("../../assets/backgroundImg.png") center;
        background-size: cover;  
        // 样式穿透   
        :deep(.el-card) {
            width: 35vw;
            height: 38vh;
            box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.5);
            border: none;
            .el-card__header {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--el-color-primary);

                color: #fff;
                font-size: 16px;
                font-weight: 400;
                
                height: 60px;
            }
            .el-card__body {
                padding: 35px 35px;
                
            }
            .el-input {
                height: 42px;
            }
            .el-form-item:nth-child(2) {
                margin: 40px 0;
            }
            .el-button {
                width: 80px;
                height: 36px;
            }
        }   
    }
</style>